<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的拼团"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 订单导航栏 -->
        <div class="order-nav">
            <div
                class="nav-item"
                v-for="(item,index) of navList"
                :key="index"
                :class="navIndex == index ? 'active':''"
                @click="changeOrderType(item.navIndex,item.orderType)"
            >{{item.navName}}</div>
        </div>
        <!-- 订单导航栏 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="orderList"
            @pullup="loadMore"
        >

            <div
                class="order-empty-tips"
                v-if="orderList.length == 0"
            >{{emptyTips}}</div>

            <div
                class="order-item"
                v-for="(item,index) of orderList"
                :key="index"
            >
                <div class="order-status-date">
                    <div class="order-status">{{['拼团中','拼团成功','取消拼团','拼团失败'][item.status]}}</div>
                </div>
                <div class="goods-info-box">
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            :src="item.imgs"
                        />
                    </div>
                    <div class="goods-info">
                        <div class="goods-name">{{item.title}}</div>
                        <div class="goods-detail">{{item.title_sub}}</div>
                        <div
                            class="group-info"
                            v-if="item.status == 0"
                        >
                            <remain-time
                                class="group-times"
                                fontStyle="font-size:.32rem;color:#d7463c;"
                                :stopTime="item.end_time"
                            ></remain-time>
                            ,还差{{item.wait}}人
                        </div>
                    </div>
                </div>
                <div class="order-info-box">共1件商品，实付：￥{{item.money | currency}}</div>
                <div class="order-ctr-box">
                    <div
                        class="order-btn"
                        @click="goGroupDetail(item.group_id)"
                    >拼团详情</div>
                    <div
                        class="order-btn go-pay"
                        v-if="item.status == 1&&item.is_pay == 0"
                        @click="goPay(item.order_id)"
                    >去付款</div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import RemainTime from './components/RemainTime'
export default {
    name: 'MyGroup',
    components: {
        CommonHeader,
        CommonScroll,
        RemainTime
    },
    data() {
        return {
            scrollStyle: {
                top: '2.27rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            navList: [
                {
                    navIndex: 0,
                    orderType: null,
                    navName: '全部'
                },
                {
                    navIndex: 1,
                    orderType: 0,
                    navName: '拼团中'
                },
                {
                    navIndex: 2,
                    orderType: 1,
                    navName: '拼团成功'
                },
                {
                    navIndex: 3,
                    orderType: 2,
                    navName: '拼团失败'
                }
            ],
            navIndex: 0,
            orderType: '',
            orderList: [],
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            emptyTips: '正在全力加载中...'
        }
    },
    mounted() {
        this.getOrderList()
    },
    methods: {
        getOrderList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                status: this.orderType,
                page_size: 10,
                page: this.nowPage
            })
            this.axios
                .post('/api/group_buy/my_group_list.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        if (data.data.list.length == 0) {
                            this.emptyTips = '暂无拼团信息'
                        }
                        this.orderList = this.orderList.concat(data.data.list)
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getOrderList()
            }
        },
        changeOrderType(index, value) {
            if (this.isLoading) {
                return
            }
            this.navIndex = index
            this.orderType = value
            this.emptyTips = '正在全力加载中...'
            this.nowPage = 1
            this.totalPage = 1
            this.orderList = []
            this.getOrderList()
        },
        goGroupDetail(id) {
            this.$router.push({
                path: '/joinGroup',
                query: {
                    groupId: id
                }
            })
        },
        goPay(id) {
            this.$router.push({
                path: '/orderDetail',
                query: {
                    orderId: id
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.order-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.order-nav
    display flex
    justify-content space-between
    padding 0 0.82rem
    background #fff
    border-bottom 1px solid #e5e5e5
    .nav-item
        height 1.14rem
        line-height 1.14rem
        font-size 0.38rem
        color #333
        box-sizing border-box
    .active
        color #d7463c
        border-bottom 2px solid #d7463c
.order-item
    background #fff
    margin-bottom 0.18rem
    .order-status-date
        display flex
        align-items center
        justify-content flex-end
        height 1.12rem
        padding 0 0.63rem
        border-bottom 1px solid #e5e5e5
        .order-date
            font-size 0.32rem
            color #333
        .order-status
            font-size 0.32rem
            color #d7463c
    .goods-info-box
        display flex
        align-items center
        height 2.67rem
        padding 0 0.35rem
        border-bottom 1px solid #e5e5e5
        .goods-img-box
            width 1.87rem
            height 1.87rem
            overflow hidden
            .goods-img
                width 1.87rem
                height 1.87rem
        .goods-info
            flex 1
            min-width 1px
            margin-left 0.18rem
            .goods-name
                font-size 0.37rem
                color #333
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .goods-detail
                margin-top 0.19rem
                font-size 0.32rem
                color #666
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .group-info
                display flex
                margin-top 0.16rem
                font-size 0.32rem
                color #d7463c
    .order-info-box
        display flex
        align-items center
        justify-content flex-end
        height 0.85rem
        padding 0 0.4rem
        font-size 0.32rem
        color #333
        border-bottom 1px solid #e5e5e5
    .order-ctr-box
        display flex
        align-items center
        justify-content flex-end
        height 1.29rem
        padding 0 0.43rem
        .order-btn
            width 1.99rem
            line-height 0.72rem
            text-align center
            font-size 0.39rem
            color #666
            border 1px solid #ccc
            border-radius 30px
            margin-left 0.32rem
        .invite-btn, .go-pay
            color #d7463c
            border 1px solid #d7463c
</style>


